<template>
  <div class="home">
    <a-row :gutter="16">
      <a-col :xs="24" :sm="24" :md="14" :lg="16" :xl="16">
        <a-card :hoverable="true">
          <BaseChart :options="saleOptions" />
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="10" :lg="8" :xl="8">
        <a-card :hoverable="true">
          <BaseChart :options="storageOptions" />
        </a-card>
      </a-col>
    </a-row>
    <AnalysisTabs class="mt-16" />
  </div>
</template>

<script setup>
import AnalysisTabs from "./components/AnalysisTabs.vue";

const saleOptions = {
  grid: {
    top: 50,
    right: 20,
    bottom: 30,
    left: 40,
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["销售额", "成交价"],
    right: 13,
  },
  xAxis: {
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },
  yAxis: [
    {
      type: "value",
      name: "价格",
    },
  ],
  series: [
    {
      name: "销售额",
      type: "bar",
      data: [408, 932, 581, 721, 536, 643, 431, 185, 771, 299, 336, 156],
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: "linear",
          global: false,
          colorStops: [
            {
              offset: 0,
              color: "#0b9eff",
            },
            {
              offset: 1,
              color: "#63caff",
            },
          ],
        },
      },
    },
    {
      name: "成交价",
      type: "line",
      data: [256, 678, 572, 699, 516, 561, 635, 882, 549, 108, 298, 374],
      itemStyle: {
        color: "#f95959",
      },
    },
  ],
};

const storageOptions = {
  tooltip: {
    trigger: "item", //数据项图形触发
    formatter: "{a} <br/>{b}: {c} ({d}%)", // 展示格式
  },
  series: [
    {
      name: "容量",
      type: "pie",
      selectedMode: "single",
      radius: ["50%", "70%"],
      clockwise: false,
      label: {
        position: "outside",
        formatter: "{b}\n{c}GB ({d}%)",
      },
      data: [
        { value: 65, name: "使用" },
        { value: 15, name: "未使用" },
      ],
    },
  ],
  graphic: {
    // 添加原生图形元素组件
    elements: [
      {
        type: "text", // 组件类型
        left: "center", //定位
        top: "43%", // 定位
        style: {
          // 样式
          text: "容量", //文字
          fontSize: 13, //文字大小
          textAlign: "center", //定位
          width: 30,
          height: 30,
          fill: "darkgray", // 字体颜色
        },
      },
      {
        type: "text",
        left: "center",
        top: "52%",
        style: {
          text: "80GB",
          fontSize: 18,
          textAlign: "center",
          width: 30,
          height: 25,
          fill: "#0b9eff",
        },
      },
    ],
  },
};
</script>

<style lang="scss" scoped></style>
